<template>
  <div class="home-wrap">
    <div v-metro class="metro"></div>
    <shooting-star />
    <blink-star
      :stars="[
        { left: '2.5rem', top: '0.8rem', type: '--yellow-bling' },
        { left: '4.5rem', top: '0.5rem', type: '--yellow-bling' },
      ]"
    />
    <div class="character"></div>
    <div class="star1"></div>
    <div class="star2"></div>
    <!-- <div class="shooting_star"></div> -->
    <div class="home-text">
      <div class="title">
        <div class="toptitle"></div>
        <div class="midtitle"></div>
      </div>
      <div class="text-comeing-time"></div>
      <div class="app-info">
        <div class="text-five-year">
          在这 <span class="number" style="font-size: 0.38rem">5</span> 年里
        </div>
        <div class="text-info">
          <div class="text-info-item text-info-item--1">
            诞生过<span class="number" style="font-size: 0.38rem">{{
              history.num_reged_users
            }}</span
            >个有趣的灵魂
          </div>
          <div class="text-info-item text-info-item--2">
            Ta们绑过<span class="number" style="font-size: 0.38rem">{{
              history.num_chained
            }}</span
            >次链子
          </div>
          <div class="text-info-item text-info-item--3">
            送过<span class="number" style="font-size: 0.38rem">{{
              history.num_send_gifts
            }}</span
            >次礼物
          </div>
          <div
            class="text-info-item text-info-item--4"
            style="margin-bottom: 0.6rem"
          >
            互相喜欢过<span class="number" style="font-size: 0.38rem">{{
              history.num_loves
            }}</span
            >次
          </div>
        </div>
      </div>
    </div>
    <footer class="footer">
      <button class="home-btn" @click="goToMain"></button>
      <div class="agreement">
        <div
          :class="['agreement-link', { 'agreement-link--checked': isAgree }]"
          @click="checkAgree"
        >
          <i class="icon"></i>我已知晓并同意使用<span
            class="instruction-link"
            @click.stop="showInstructions"
            >隐私须知</span
          >中的数据生成
        </div>
        <!-- <div class="time-travel-name">《我的嘿嘿时光机》</div> -->
      </div>
    </footer>
    <van-action-sheet v-model:show="isShowInstructions" class="instructions">
      <span>隐私须知</span> <br />
      为帮助你生成你的年度使用报告，参与本活动需要使用你的如下信息，下述信息的统计时段自2021年01月01日至2021年12月31日，年度报告根据你授权的信息由系统自动生成，展示信息可能会与实际存在偏差，仅供参考。
      <br />用户名 <br />用户头像 <br />注册时间 <br />使用天数 <br />签到天数
      <br />送礼次数 <br />点爱心次数 <br />绑链子次数
      <br />社交关系信息（仅包含5名好友用户名和头像） <br />搜索行为关键词
      <br />房间名关键词
      <br />本隐私须知可能存在多种语言版本，如各语言版本条款出现不一致或冲突，以本隐私须知中文简体版本为准。
    </van-action-sheet>
  </div>
</template>
<script>
import { useLoginStore } from '@/lib/js/hooks'
import { createLogin } from '@/lib/components/Login'
export default {
  setup () {
    const loginStore = useLoginStore()
    return {
      loginStore
    }
  },
  data () {
    return {
      isAgree: false,
      isShowInstructions: false,
      history: {
        num_reged_users: '',
        num_chained: '',
        num_send_gifts: '',
        num_loves: ''
      },
      isLoginOpted: false
    }
  },
  created () {
    this.getAppInfo()
    const cacheIsAgree = localStorage.getItem('isAgree')
    this.isAgree = cacheIsAgree === 'true'
  },
  methods: {
    async getAppInfo () {
      const res = await this.$api.History.getAppInfo()
      const { result: { heyhistory: history } } = res
      this.history = {
        ...history
      }
    },
    goToMain () {
      if (!this.isAgree) {
        this.$toast('请先勾选同意使用隐私须知后，\n 开启回顾！')
        return
      }

      if (window.isHeyHeyTalk()) {
        if (!this.loginStore.isLogin) {
          createLogin(() => {
            this.loginStore.isLogin = true
          })
        } else {
          this.$router.push({ name: 'main' })
        }
      } else {
        if (!this.isLoginOpted) {
          createLogin(() => {
            this.loginStore.isLogin = true
            this.isLoginOpted = true
          })
        } else {
          this.$router.push({ name: 'main' })
        }
      }
    },

    showInstructions () {
      this.isShowInstructions = true
    },

    checkAgree () {
      this.isAgree = !this.isAgree
      localStorage.setItem('isAgree', this.isAgree)
    }
  }
}
</script>
<style lang="scss" scoped>
.home-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("./images/home/bg.jpg") no-repeat,
    url("./images/home/bg-mini.jpg") no-repeat;
  background-size: 100% auto, 100% auto;
  background-position: 0 100%, 0 100%;
  overflow: hidden;
}

.metro {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50%;
}

.character {
  position: absolute;
  width: 3.75rem;
  height: 2.53rem;
  background-image: url("./images/home/character.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: character 4s infinite;
  -webkit-animation: character 4s infinite;
  @keyframes character {
    0% {
      top: 49%;
      right: 0;
    }
    50% {
      top: 50%;
      right: 0;
    }
    100% {
      top: 49%;
      right: 0;
    }
  }

  @-webkit-keyframes character {
    0% {
      top: 7.3rem;
      right: 0;
    }
    50% {
      top: 7.8rem;
      right: 0;
    }
    100% {
      top: 7.3rem;
      right: 0;
    }
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2.2rem);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.home-cloud {
  position: absolute;
  top: 75%;
  width: 2.8rem;
  height: 1.8rem;
  background-image: url("./images/home/cloud.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.star1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.46rem;
  height: 3.2rem;
  background-image: url("./images/home/star1.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star1 6s infinite;
  -webkit-animation: star1 6s infinite;
  @keyframes star1 {
    50% {
      top: -5%;
    }
    100% {
      top: 0;
    }
  }
  @-webkit-keyframes star1 {
    50% {
      top: -5%;
    }
    100% {
      top: 0;
    }
  }
}

.star2 {
  position: absolute;
  top: 6%;
  left: 0;
  width: 1.47rem;
  height: 1.32rem;
  background-image: url("./images/home/star2.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star2 6s infinite;
  -webkit-animation: star2 6s infinite;
  @keyframes star2 {
    50% {
      top: 12%;
    }
    100% {
      top: 6%;
    }
  }
  @-webkit-keyframes star2 {
    50% {
      top: 12%;
    }
    100% {
      top: 6%;
    }
  }
}

.home-text {
  position: absolute;
  top: 1.8rem;
  width: 100%;
  height: 100%;
  padding: 0 0.8rem 0 0.8rem;

  .title {
    margin-bottom: 0.6rem;
    animation: fadeInLeft 0.8s;
    animation-delay: 6.5s;
    animation-fill-mode: forwards;
    transform: translateX(-8rem);
  }

  .toptitle {
    width: 4.06rem;
    height: 0.6rem;
    background: url("./images/home/icon-title1.png") no-repeat;
    background-size: 100% auto;
    margin-bottom: 0.2rem;
  }

  .midtitle {
    width: 100%;
    height: 0.87rem;
    background: url("./images/home/icon-title2.png") no-repeat;
    background-size: 100% auto;
  }

  .text-comeing-time {
    width: 3.38rem;
    height: 0.78rem;
    background: url("./images/home/icon-title3.png") no-repeat;
    background-size: 100% auto;
    margin-bottom: 0.55rem;
    animation: fadeInLeft 0.8s;
    animation-delay: 0;
    animation-fill-mode: forwards;
    transform: translateX(-4.4rem);
  }

  .app-info {
    color: #fff;
    font-size: 0.32rem;
    font-weight: 400;
    margin-bottom: 20%;
    .text-five-year {
      width: 4rem;
      height: 0.78rem;
      background-size: 100% auto;
      margin-bottom: 0.15rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      animation: fadeInLeft 0.8s;
      animation-delay: 1s;
      animation-fill-mode: forwards;
      transform: translateX(-6rem);
      .number {
        margin-left: 0.1rem;
        margin-right: 0.1rem;
        font-size: 0.4rem;
      }
    }
    .text-info {
      .num {
        color: #ffc811;
      }
      .text-info-item {
        animation: fadeInLeft 0.8s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
        transform: translateX(-7rem);
      }
      .text-info-item--1 {
        animation-delay: 2s;
      }
      .text-info-item--2 {
        animation-delay: 3s;
      }
      .text-info-item--3 {
        animation-delay: 4s;
      }
      .text-info-item--4 {
        animation-delay: 5s;
      }
    }
  }
}
.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
  .home-btn {
    display: block;
    width: 3.96rem;
    margin: 0 auto;
    margin-bottom: 0.15rem;
    height: 0.87rem;
    background-repeat: no-repeat;
    background-image: url("./images/home/btn.png");
    background-size: 100% auto;
  }
  .agreement {
    font-size: 0.22rem;
    text-align: center;
    color: #37257e;
    line-height: 1.5;
    .agreement-link {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 0.5rem;
      .icon {
        display: block;
        width: 0.28rem;
        height: 0.28rem;
        background: url("./images/home/icon-unchecked.png") no-repeat;
        background-size: 100% auto;
        margin-right: 0.1rem;
      }
      .instruction-link {
        text-decoration: underline;
      }
    }
    .agreement-link--checked {
      .icon {
        background: url("./images/home/icon-checked.png") no-repeat;
        background-size: 100% auto;
      }
    }
    // .time-travel-name {
    //   color: #ef4603;
    //   text-decoration: none;
    // }
  }
}

::v-deep .instructions {
  padding: 0.2rem;
  font-size: 0.3rem;
  span {
    font-size: 0.4rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
  }
}
</style>
